.sunAnimation {
  position: relative;
  width: 100vw;
  height: 100vh;

  top: -33vh;
  right: 35vw;

  animation: 45s flowSun infinite linear;
}

.sun {
  position: absolute;
  top: 0;
  right: 0;

  z-index: 0;
}

@media (min-width: 2048px) {
  .sunAnimation {
    right: 38vw;
  }
}

@media (max-width: 1680px) {
  .sunAnimation {
    top: -35vh;
    right: 15vw;
    scale: 80%;
  }
}

@media (max-width: 996px) {
  .sunAnimation {
    top: -40vh;
    right: 35vw;
    scale: 80%;
  }
}

@media (max-width: 768px) {
  .sunAnimation {
    top: -40vh;
    right: 8vh;
    scale: 60%;
  }
}

@media (max-width: 420px) {
  .sunAnimation {
    top: -47vh;
    right: -5vw;
    scale: 40%;
  }
}

@keyframes flowSun {
  0% {
    transform: rotate(0) translate(0, 0);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(15deg) translate(75%, 45%);
  }
}

@media (min-width: 2048px) {
  @keyframes flowSun {
    0% {
      transform: rotate(0) translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(10deg) translate(60%, 65%);
    }
  }
}

/* Change the trajectory of sun on smaller devices, as the swirl is getting smaller when the width decreases. */
@media (max-width: 1680px) {
  @keyframes flowSun {
    0% {
      transform: rotate(0) translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(10deg) translate(60%, 60%);
    }
  }
}

@media (max-width: 996px) {
  @keyframes flowSun {
    0% {
      transform: rotate(0) translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(15deg) translate(85%, 65%);
    }
  }
}

@media (max-width: 768px) {
  @keyframes flowSun {
    0% {
      transform: rotate(0) translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: rotate(15deg) translate(80%, 60%);
    }
  }
}

@media (max-width: 640px) {
  @keyframes flowSun {
    0% {
      transform: rotate(0) translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: rotate(12deg) translate(120%, 45%);
    }
  }
}

@media (max-width: 420px) {
  @keyframes flowSun {
    0% {
      transform: translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translate(175%, 95%);
    }
  }
}

@media (max-width: 360px) {
  @keyframes flowSun {
    0% {
      transform: translate(0, 0);
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(250%, 95%);
    }
  }
}
